<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="html" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<html:head/>
<link rel="stylesheet" type="text/css"
	href="/ComputerStore/public/css/admin_content.css">
<script type="text/javascript"
	src="/ComputerStore/public/js/jquery-1.6.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Danh sách sản phẩm</title>
</head>
<body>
	<h1>Quản lý sản phẩm</h1>
	<!-- Menu -->
	<div id="options">
		<a id="showList" href="#">&nbsp;&nbsp;&nbsp;Danh sách sản
			phẩm&nbsp;&nbsp;&nbsp;</a> <a id="showForm" href="#">&nbsp;&nbsp;&nbsp;Thêm
			sản phẩm&nbsp;&nbsp;&nbsp;</a>
	</div>
	<br />

	<!-- Danh sách sản phẩm -->
	<div id="list">
		<div class="title">Danh sách sản phẩm</div>
		<div class="content">
			<table>
				<tr>
					<td>Danh mục:</td>
					<td>
						<!-- Combobox here -->
					</td>
				</tr>
			</table>
			<table border="1">
				<tr>
					<th>STT</th>
					<th>Tên sản phẩm</th>
					<th>Số lượng</th>
					<th>Giá</th>
					<th>Đơn vị tính</th>
					<th>Kích hoạt</th>
					<th>Danh mục</th>
					<th>Nhà sản xuất</th>
					<th>Hình ảnh</th>
					<th>Mã</th>
					<th>Thao tác</th>
				</tr>
				<html:iterator value="productList" var="product" status="itStatus">
					<tr id="<html:property value="id"/>">
						<td align="center"><html:property value="#itStatus.count" /></td>
						<td align="center"><html:property value="name" /></td>
						<td style="display: none" align="center"><html:property
								value="description" /></td>
						<td align="center"><html:property value="quantity" /></td>
						<td align="center"><html:property value="price" /></td>
						<td style="display: none"><html:property value="unit.id" /></td>
						<td align="center"><html:property value="unit.title" /></td>
						<html:if test="status==true">
							<td align="center">Đã kích hoạt</td>
						</html:if>
						<html:else>
							<td align="center">Chưa kích hoạt</td>
						</html:else>
						<td style="display: none"><html:property value="category.id" /></td>
						<td align="center"><html:property value="category.name" /></td>
						<td style="display: none"><html:property
								value="manufacturer.id" /></td>
						<td align="center"><html:property value="manufacturer.name" /></td>
						<td align="center"><img width="60px" height="20px"
							src="/ComputerStore/public/images/Product_photos/<html:property value="image" />"></img></td>
						<td align="center"><html:property value="id" /></td>
						<td align="center"><a class="operation"
							href="deleteProduct?id=<html:property value="id"/>">&nbsp;Xóa&nbsp;</a>&nbsp;-&nbsp;<a
							class="operation" name="edit" id="<html:property value="id"/>"
							href="#">&nbsp;Sửa&nbsp;</a></td>
					</tr>
				</html:iterator>
			</table>
		</div>
	</div>

	<!-- Thêm mới sản phẩm -->
	<div id="formAdd">
		<div class="title">Thêm Sản phẩm</div>
		<div class="content" align="center">
			<html:form action="addProduct" method="post" validate="true" enctype='multipart/form-data'>
				<html:textfield id="pro1" name="product.name" label="Tên sản phẩm" required="true"
					cssClass="textfield" size="50" />
				<html:textarea id="pro2" name="product.description" label="Mô tả" required="true"
					cssClass="textfield" cols="25" />
				<html:textfield id="pro3" name="product.price" label="Giá" required="true"
					cssClass="textfield" size="50" />
				<html:select cssClass="textfield" name="product.unit.id"
					label="Đơn vị tính" list="unitList" listKey="id" listValue="title"></html:select>
				<html:checkbox name="status" label="Hiển thị" cssClass="textfield" />
				<html:select cssClass="textfield" name="product.category.id"
					label="Danh mục" list="categoryList" listKey="id" listValue="name"></html:select>
				<html:select cssClass="textfield" name="product.manufacturer.id"
					label="Nhà sản xuất" list="manufacturerList" listKey="id"
					listValue="name"></html:select>
				<html:file cssClass="textfield" name="file" label="Hình ảnh"
					size="36" />
				<html:submit id="button" name="submit" value="Thêm mới" />
			</html:form>
		</div>
	</div>

	<!-- Form thay đổi thông tin sản phẩm -->
	<div id="formEdit">
		<div class="title">Sửa thông tin sản phẩm</div>
		<div class="content" align="center">
			<html:form id="form2" action="editProduct" method="post" enctype="multipart/form-data" validate="true">
				<html:hidden id="idEditTextfield" name="product.id" />
				<html:textfield id="nameEditTextfield" cssClass="textfield" required="true"
					name="product.name" label="Tên sản phẩm" size="50" />
				<html:textarea id="descriptionEditTextfield" cssClass="textfield" required="true"
					name="product.description" label="Mô tả" cols="25" />
				<html:textfield id="priceEditTextfield" cssClass="textfield" required="true"
					name="product.price" label="Giá" size="50" />
				<html:select id="unitEditSelect" cssClass="textfield"
					name="product.unit.id" label="Đơn vị tính" list="unitList"
					listKey="id" listValue="title"></html:select>
				<html:checkbox id="statusEditCheckBox" cssClass="textfield"
					name="status" label="Hiển thị" />
				<html:select id="categoryEditSelect" cssClass="textfield"
					name="product.category.id" label="Danh mục" list="categoryList"
					listKey="id" listValue="name"></html:select>
				<html:select id="manufacturerEditSelect" cssClass="textfield"
					name="product.manufacturer.id" label="Nhà sản xuất"
					list="manufacturerList" listKey="id" listValue="name"></html:select>
				<!--<html:hidden id="imageOldValue" name="image"/>-->
				<html:file id="imageEditFile" cssClass="textfield" 
					name="product.image" label="Hình ảnh" size="36" />
				<html:submit id="button" value="Cập nhật"></html:submit>
			</html:form>
		</div>
	</div>


	<!-- Javascript -->
	<script>
		$(document)
				.ready(
						function() {
							$("#formEdit").css("display", "none");
							$("#formAdd").css("display", "none");
							$("#showList").css("border-style", "inset");

							$("#showForm").click(function() {
								$(this).css("border-style", "inset");
								$("#showList").css("border-style", "outset");
								$("#list").hide("fast");
								$("#formEdit").hide("fast");
								$("#formAdd").show("fast");
								$("#pro1").val("");
								$("#pro2").val("");
								$("#pro3").val("");
							});

							$("#showList").click(function() {
								$(this).css("border-style", "inset");
								$("#showForm").css("border-style", "outset");
								$("#formAdd").hide("fast");
								$("#formEdit").hide("fast");
								$("#list").show("fast");
							});

							var valueArray = new Array();

							$("a").click(function() {
								if ($(this).attr("name") == "edit") {
									var id = $(this).attr("id");
									$('#' + id + ' td').each(function(index) {
														valueArray[index] = $(this).text();
													});
									$("#idEditTextfield").val(id);
									$("#nameEditTextfield").val(valueArray[1]);
									$("#descriptionEditTextfield").val(valueArray[2]);
									$("#priceEditTextfield").val(valueArray[4]);
									$("#unitEditSelect").attr({"key":valueArray[6],"value":valueArray[5]});
									if ($(valueArray[6] == "Đã kích hoạt")) {
										$("#statusEditCheckBox").attr('checked',true);
									}else{
										$("#statusEditCheckBox").attr('checked',false);
									}
									$("#categoryEditSelect").attr({"key":valueArray[9],"value":valueArray[8]});
									$("#manufacturerEditSelect").attr({"key":valueArray[11],"value":valueArray[10]});
									//$("#imageOldValue").val(valueArray[12]);
									$("#showList").css("border-style","outset");
									$("#list").hide("fast");
									$("#formEdit").show("fast");
								}
							});
						});
	</script>
</body>
</html>